<!-- 商城 - 商品列表展示组件 -->
<template>
	<view class="vk-mall-goods-list">
		<view class="vk-mall-goods-list-box">
			<vk-mall-goods-list-item
				v-for="(item, index) in listCom" :key="item._id"
				:item="item"
				@cart="showCart"
				@click="pageToDetail"
			></vk-mall-goods-list-item>
		</view>

		<view v-if="action" style="padding: 30rpx 0;">
			<!-- 加载更多-->
			<u-loadmore :status="state.loadmore" bg-color="var(--bgcolor)" @loadmore="nextPage" />
		</view>
		<!-- sku弹窗组件 -->
		<vk-mall-goods-sku-popup v-model="skuPopup.show" :goods-info="skuPopup.goods" :mode="skuPopup.mode"/>
	</view>
</template>

<script>
export default {
	name: "vk-mall-goods-list",
	props: {
		// 本地商品数据源
		localdata: {
			Type: Array
		},
		// 云函数请求地址
		action:{
			Type:String
		},
		actionData:{
			Type:Object
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			// 商品最终数据源
			data: {
				list: [],
				total: "-",
				hasMore: true // 是否还有下一页数据
			},
			// 列表查询请求数据
			queryForm: {
				// 分页数据
				pagination: {
					pageIndex: 1, //当前页码
					pageSize: 20, //每页显示数量
				},
				// 表单数据源
				formData: {
					category_ids:"",
					name:"",
					keywords:"",
					is_on_sale: true,
					coupon_id:"",
				},
				// 查询匹配规则
				columns: [
					{ key: "category_ids", mode: "=" },
					{ key: "name", mode: "%%" },
					{ key: "keywords", mode: "%%" },
					{ key: "is_on_sale", mode: "=" },
					{ key: "coupon_id", mode: "custom" },
				],
				// 排序规则
				sortRule: [
					{ name:"sort", type:"asc" }, // desc降序 asc升序
				]
			},
			// 页面状态
			state: {
				loadmore: "loading", // loadmore的显示状态
			},
			loading:false,
			skuPopup:{
				show:false,
				mode:1,
				goods:{}
			}
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		// 初始化
		init() {
			let that = this;
			let { vk, action, actionData }= that;
			if (action) {
				let actionDataStr = JSON.stringify(actionData);
				let keyName = `pub-${action}-${actionDataStr}`;
				// 读取本地缓存
				let cache = vk.getStorageSync(keyName);
				if (cache) {
					that.data.list = cache;
					that.loading = false;
				}
				// 不管是否有缓存，请求依然执行，同时更新缓存。
				that.search({
					success:(data) => {
						// 将数据缓存到本地，下次打开时，先加载本地数据，使页面可以快速展示！
						vk.setStorageSync(keyName, data.list);
					}
				});
			}
		},
		// 显示加入购物车弹窗
		showCart(goods){
			let that = this;
			that.skuPopup.show = true;
			that.skuPopup.goods = goods;
		},
		// 跳转到详情页
		pageToDetail(goods){
			let that = this;
			that.vk.myfn.goods.pageToDetail(goods);
		},
		// 搜索查询
		search(obj) {
			let that = this;
			that.queryForm.pagination.pageIndex = 1;
			that.data.pageKey = true;
			that.getList(obj);
		},
		// 获取list数据
		getList(obj){
			let that = this;
			let { vk, action, actionData, actionTitle }= that;
			vk.pubfn.objectAssign(that.queryForm.formData, actionData);
			if (action) {
				vk.pubfn.getListData2({
					...obj,
					that,
					url: action
				});
			}
		},
		// 加载下一页数据
		nextPage() {
			let that = this;
			if (that.state.loadmore == "loadmore") {
				that.state.loadmore = "loading";
				that.queryForm.pagination.pageIndex++;
				that.getList();
			}
		},
	},
	// 监听器
	watch: {

	},
	// 计算属性
	computed: {
		listCom(){
			let { localdata=[], action, data={} } = this;
			return action ? data.list : localdata;
		}
	}
};
</script>

<style lang="scss" scoped>
.vk-mall-goods-list-box {
	width: 100%;
	background-color: var(--bgcolor);
	padding: 20rpx;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 20rpx;
}
</style>
